<template>
  <div>
  <el-container class="homecontainer">
    <el-header >
    <div class="head" >
      <div class="div1">购物商城管理系统</div>
      <div class="div1" style="color:blue;width:110px;height: 50px;" @click="goToShoppingMall">购物商城</div>
      <div class="div2" >欢迎你!&nbsp;{{nickName}}</div>
    </div> 
  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-menu router
          default-active="2"
          class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>首页轮播图</span></template>
              <el-menu-item @click="HomeImageAdd">新增轮播图</el-menu-item>
              <el-menu-item @click="HomeImageFind">查找轮播图</el-menu-item>
              <el-menu-item @click="HomeImageDel">删除轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>商品分类</span></template>
              <el-menu-item @click="CategoryAdd">新增商品分类</el-menu-item>
              <el-menu-item @click="CategoryGet">获取商品分类</el-menu-item>
              <el-menu-item @click="CategoryDel">删除商品分类</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>用户信息</span></template>
              <el-menu-item @click="UserPassChange">修改用户密码</el-menu-item>
              <el-menu-item @click="UserInfoGet">获取用户信息</el-menu-item>
              <el-menu-item @click="UserDel">删除用户</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>商品数据</span></template>
              <el-menu-item @click="GoodsAdd">新增商品信息</el-menu-item>
              <el-menu-item @click="GoodsUpdate">更新商品数据</el-menu-item>
              <el-menu-item @click="GoodsGet">获取商品数据</el-menu-item>
              <el-menu-item @click="GoodsDel">删除商品</el-menu-item>
          </el-submenu>
        </el-menu>
    </el-aside>
    <el-container>
      <el-main  height="300px" >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >{{ mainName }}</el-breadcrumb-item>
          <el-breadcrumb-item >{{facName}}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
        <!-- 新增轮播图 -->
        <div v-if="routerFlag == 'HomeImageAdd'">
            新增轮播图
            <el-form ref="form" :model="HomeImageForm" label-width="100px">
                <el-form-item label="轮播图路径">
                    <el-input v-model="HomeImageForm.mainImage" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="AddHomeImage">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 查找轮播图 -->
        <div v-else-if="routerFlag == 'HomeImageFind'">
            查找轮播图
            <el-form ref="form" :model="HomeImageForm" label-width="110px">
                <el-form-item label="首页轮播图编号">
                    <el-input v-model="HomeImageForm.id" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="FindHomeImage">查找</el-button>
                    <div class="demo-image">
                      <div class="block">
                        <!--v-if="fits.mainImage"在 fits.mainImage有值的情况下显示 -->
                        <el-image v-if="fits.mainImage" 
                          style="width: 200px; height: 200px"
                          :src="fits.mainImage"></el-image>
                      </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- 删除轮播图 -->
        <div v-else-if="routerFlag == 'HomeImageDel'">
            删除轮播图
            <el-form ref="form" :model="HomeImageForm" label-width="100px">
                <el-form-item label="轮播图ID">
                    <el-input v-model="HomeImageForm.mainImage" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="DelHomeImage">删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 新增商品分类 -->
        <div v-else-if="routerFlag == 'CategoryAdd'">
            新增商品分类
            <el-form ref="form" :model="CategoryForm" label-width="140px">
                <el-form-item label="新增商品分类名称">
                    <el-input v-model="CategoryForm.goodsCategory" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="AddCategory">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 获取商品分类 -->
        <div v-else-if="routerFlag == 'CategoryGet'">
            获取商品分类
            <el-form ref="form" :model="CategoryForm" label-width="110px">
                <el-form-item label="商品分类名称">
                    <el-input v-model="CategoryForm.categoryName" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="FindCategory">查找</el-button>
                    <div class="demo-image">
                      <div class="block">
                        <!--v-if="fits.mainImage"在 fits.mainImage有值的情况下显示 -->
                        <el-image v-if="fits.mainImage" 
                          style="width: 200px; height: 200px"
                          :src="fits.mainImage"></el-image>
                      </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div v-else-if="routerFlag == 'CategoryDel'">
            删除商品分类
            <el-form ref="form" :model="CategoryForm" label-width="100px">
                <el-form-item label="商品分类编号">
                    <el-input v-model="CategoryForm.id" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="DelCategory">删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 修改用户密码 -->
        <div v-else-if="routerFlag == 'UserPassChange'">
          修改用户密码
          <el-form ref="form" :model="UserInfoForm" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="UserInfoForm.userName" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="UserInfoForm.passWord" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button  type="primary" @click="ChangeUserPass">修改</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 获取用户信息 -->
        <div v-else-if="routerFlag == 'UserInfoGet'">
          获取用户信息
          <el-form ref="form" :model="UserInfoForm" label-width="110px">
                <el-form-item label="用户名">
                    <el-input v-model="UserInfoForm.userName" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="GetuserInfo" style="margin-bottom:15px;">获取</el-button>
                      <el-table  :data="message" border style="width: 100%;">
                        <el-table-column
                          prop="id"
                          label="id"
                          top="40px">
                        </el-table-column>
                        <el-table-column
                          prop="nickName"
                          label="昵称"
                          top="40px">
                        </el-table-column>
                        <el-table-column
                          prop="sex"
                          label="性别"
                          >
                        </el-table-column>
                      </el-table>
                </el-form-item>
            </el-form>
        </div>
        <!-- 删除用户 -->
        <div v-else-if="routerFlag == 'UserDel'">
          删除用户
          <el-form ref="form" :model="UserInfoForm" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="UserInfoForm.userName" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button  type="primary" @click="Deluser">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 新增商品信息 -->
        <div v-else-if="routerFlag == 'GoodsAdd'">
          新增商品信息
            <el-form ref="form" :model="GoodsForm" label-width="110px">
              <!-- <el-form-item label="用户名">
                    <el-input v-model="GoodsForm.userName" style="top: 5px;"></el-input>
                </el-form-item> -->
                <el-form-item label="商品分类" style="margin-top:20px;">
                    <el-select v-model="GoodsForm.goodsCategoryId" placeholder="请选择" style="margin-left:-400px;">
                      <el-option
                        v-for="item in goodsCategoryList"
                        :key="item.id"
                        :label="item.goodsCategory"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="GoodsForm.goodsName" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="GoodsForm.goodsPrice" style="top: 5px;"></el-input>
                </el-form-item>
                <el-upload
                  v-model="GoodsForm.goodsImage"  
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :http-request="uploadImage"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传商品图片</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <!-- <el-form-item label="商品图片">
                  <el-input v-model="GoodsForm.goodsImage" style="top: 5px;"></el-input>
                  <img src="GoodsForm.goodsImage" alt="">
                </el-form-item> -->
                <el-form-item label="商品库存数量">
                    <el-input v-model="GoodsForm.goodsInventoryCount" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input  type="textarea" v-model="GoodsForm.goodsDescription" style="top: 5px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="AddGoods">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 更新商品数据 -->
        <div v-else-if="routerFlag == 'GoodsUpdate'">
          更新商品数据
          <el-form ref="form" :model="GoodsForm" label-width="100px">
            <el-form-item label="商品分类" style="margin-top:20px;">
                    <el-select v-model="GoodsForm.goodsCategoryId" placeholder="请选择" style="margin-left:-400px;">
                      <el-option
                        v-for="item in goodsCategoryList"
                        :key="item.id"
                        :label="item.goodsCategory"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="GoodsForm.goodsName" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="GoodsForm.goodsPrice" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item label="商品库存数量">
              <el-input v-model="GoodsForm.goodsInventoryCount" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item label="商品图片路径">
              <el-upload
                  v-model="GoodsForm.goodsImage"  
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :http-request="uploadImage"
                  list-type="picture">
                  <el-button size="small" type="primary">点击更新商品图片</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品描述">
              <el-input  type="textarea" v-model="GoodsForm.goodsDescription" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button  type="primary" @click="UpdateGoods">更新</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 获取商品数据 -->
        <div v-else-if="routerFlag == 'GoodsGet'">
          获取商品数据
          <el-form ref="form" :model="GoodsForm" label-width="110px">
                <el-form-item label="商品名称">
                    <el-input v-model="GoodsForm.goodsName" style="top: 5px;margin-bottom: 20px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="GetGoodsInfo" style="margin-bottom:15px;">获取</el-button>
                      <el-table :data="goodsmessage" border style="width: 100%;align-items:center ;">
                        <el-table-column
                          prop="goodsName"
                          label="商品名称"
                          top="40px">
                        </el-table-column>
                        <el-table-column
                          prop="goodsDescription"
                          label="商品描述"
                          top="40px">
                        </el-table-column>
                        <el-table-column
                          prop="goodsPrice"
                          label="商品价格"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="goodsInventoryCount"
                          label="商品数量"
                          >
                        </el-table-column>
                        <el-image v-if="goodsmessage.goodsImage" 
                          style="width: 200px; height: 200px"
                          :src="goodsImage"></el-image>
                      </el-table>
                </el-form-item>
            </el-form>
        </div>
        <!-- 删除商品 -->
        <div v-else-if="routerFlag == 'GoodsDel'">
          删除商品
          <el-form ref="form" :model="GoodsForm" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="GoodsForm.userName" style="top: 5px;"></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button  type="primary" @click="DelShopTrolley">删除</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <el-footer height="60px">2022-Spring Boot-Vue-Element-ui-Mabtis-Plus</el-footer>
    </el-container>
  </el-container>
</el-container>
  </div>
</template>

<script>
import {userInfo,insertMainImage,getMainImageById,deleteMainImage,GoodsCategory,getCategoryByName, getAllCategory } from "../ajax/get"
import {deleteCategory,changeUserPassWord,deleteUser,searchGoodsByGoodsName} from "../ajax/get"
import {addGoods,loadLocalFile,updateGoods,uploadImageToServerRandName} from "../ajax/post"
// import {} from "../ajax/get"
export default {
    name:"ShopAdminMain",
    data() {
        return {
            nickName: "", // 昵称
            routerFlag: "HomeImageAdd",
            facName: "新增轮播图", // 切换不同功能时显示的名称
            mainName:"首页轮播图",
            HomeImageForm: {}, // 首页轮播图对象
            fits:[],
            CategoryForm:{},//商品分类对象
            UserInfoForm:{},//用户信息对象
            message:[],
            GoodsForm:{},//商品数据对象
            fileList: [],
            goodsCategoryList: [], // 商品分类列表
            goodsmessage:[]//以商品名称查找的商品信息列表
        }
    },
    methods: {
        goToShoppingMall(){
          this.$router.push('/ShoppingMall')
        },
        // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
            })
        },
        //新增轮播图
        HomeImageAdd() {
            console.log(111);
            this.routerFlag = "HomeImageAdd";
            this.facName = "新增轮播图";
            this.mainName = "首页轮播图";
        },
        //查找轮播图
        HomeImageFind() {
            this.routerFlag = "HomeImageFind";
            this.facName = "查找轮播图";
            this.mainName = "首页轮播图";
        },
        //删除轮播图
        HomeImageDel() {
          this.routerFlag = "HomeImageDel";
            this.facName = "删除轮播图";
            this.mainName = "首页轮播图";
        },
        //新增商品分类
        CategoryAdd() {
            this.routerFlag = "CategoryAdd";
            this.facName = "新增商品分类";
            this.mainName = "商品分类";
        },
        // 获取商品分类
        CategoryGet() {
            this.routerFlag = "CategoryGet";
            this.facName = "获取商品分类";
            this.mainName = "商品分类";
        },
        //删除商品分类
        CategoryDel() {
            this.routerFlag = "CategoryDel";
            this.facName = "删除商品分类";
            this.mainName = "商品分类";
        },
        //修改用户密码
        UserPassChange() {
            this.routerFlag = "UserPassChange";
            this.facName = "修改用户密码";
            this.mainName = "用户信息";
        },
        //获取用户信息
        UserInfoGet() {
            this.routerFlag = "UserInfoGet";
            this.facName = "获取用户信息";
            this.mainName = "用户信息";
        },
        //删除用户
        UserDel() {
            this.routerFlag = "UserDel";
            this.facName = "删除用户";
            this.mainName = "用户信息";
        },
        //获取商品数据
        GoodsGet() {
            this.routerFlag = "GoodsGet";
            this.facName = "获取商品数据";
            this.mainName = "商品数据";
        },
        //更新商品数据
        GoodsUpdate() {
            this.routerFlag = "GoodsUpdate";
            this.facName = "更新商品数据";
            this.mainName = "商品数据";
        },
        //删除商品
        GoodsDel() {
            this.routerFlag = "GoodsDel";
            this.facName = "删除商品";
            this.mainName = "商品数据";
        },
        //新增商品信息
        GoodsAdd() {
            this.routerFlag = "GoodsAdd";
            this.facName = "新增商品信息";
            this.mainName = "商品数据";
        },
        //新增轮播图方法
        AddHomeImage() {
            insertMainImage(this.HomeImageForm.mainImage).then(res => {
                console.log(res);
                this.$message(res.data.msg);
            });
        },
        //查找轮播图方法
        FindHomeImage() {
          getMainImageById(this.HomeImageForm.id).then(asd => {
                console.log(asd);
                if(this.HomeImageForm.id==asd.data.data.id){
                this.fits=asd.data.data;
                console.log(this.fits,"赋值后的值");
                }return;
            });
        },
        //删除轮播图方法
        DelHomeImage() {
          deleteMainImage(this.HomeImageForm.mainImage).then(zxc => {
                console.log(zxc);
                this.$message(zxc.data.msg);
                // console.log(this.fits,"赋值后的值");
            });
        },
        //新增商品分类方法
        AddCategory(){
          GoodsCategory(this.CategoryForm.goodsCategory).then(cate => {
            console.log(cate);
            this.$message(cate.data.msg);
          })
        },
        //获取商品分类的方法
        FindCategory(){
          getCategoryByName(this.CategoryForm.categoryName).then(byname => {
            console.log(byname);
            this.$message(byname.data.msg);
          })
        },
        //删除商品分类的方法
        DelCategory(){
          deleteCategory(this.CategoryForm.id).then(cate => {
            console.log(cate);
            this.$message(cate.data.msg);
          })
        },
        //修改用户密码方法
        ChangeUserPass(){
          changeUserPassWord(this.UserInfoForm.userName,this.UserInfoForm.passWord).then(res => {
            console.log(res);
            this.$message(res.data.msg);
          })
        },
        //获取用户信息方法
        GetuserInfo(){
          userInfo(this.UserInfoForm.userName).then(res =>{
            console.log(res);
            let Infor =res.data.data;
            console.log(this.Infor,"获取的用户信息")
            this.message = [{
              id:Infor.id,
              nickName:Infor.nickName,
              sex:Infor.sex,
            }]
          })
        },
        //删除用户方法
        Deluser(){
          deleteUser(this.UserInfoForm.userName).then(res => {
            console.log(res);
            this.$message(res.data.msg);
          })
        },
        //新增商品信息方法
        AddGoods(){
          this.GoodsForm.goodsImage = "http://47.92.53.108:8080/IMG/68c8f805-deff-4b6e-b579-2da69e221d2c.jpg";
          let obj={
            "createTime": "",
            "goodsCategoryId": this.GoodsForm.goodsCategoryId,
            "goodsDescription": this.GoodsForm.goodsDescription,
            "goodsImage": this.GoodsForm.goodsImage,
            "goodsInventoryCount": this.GoodsForm.goodsInventoryCount,
            "goodsName": this.GoodsForm.goodsName,
            "goodsPrice": this.GoodsForm.goodsPrice,
            "id": "",
            "updateTime": ""
          }
          addGoods(obj).then(res => {
            console.log(res);
            this.$message(res.data.msg);
          })
      },
        // 获取商品分类方法
      getAllCategory() { 
        getAllCategory().then(res => { 
          console.log("商品分类列表:", res);
          this.goodsCategoryList = res.data.data;
          console.log("赋值后商品分类",this.goodsCategoryList);
        })
      },
      //删除文件的时候触发
      handleRemove(file, fileList){
          console.log(file, fileList);
        },
        //点击已上传的图片预览的时候调用
        handlePreview(file) {
          console.log(file);
      },
      // 上传图片
      uploadImage(param) {
        const File = param.file;
        let formDataInfo = new FormData();
        formDataInfo.append("file", File);
        console.log("上传图片方法上传成功");

        //---调用上传图片接口
        let res = data.msg;
        this.GoodsForm.goodsImage = res; 

      },
      // 更新商品数据
      UpdateGoods(){
          this.GoodsForm.goodsImage = "http://47.92.53.108:8080/IMG/68c8f805-deff-4b6e-b579-2da69e221d2c.jpg";
          let obj={
            "createTime": "",
            "goodsCategoryId": this.GoodsForm.goodsCategoryId,
            "goodsDescription": this.GoodsForm.goodsDescription,
            "goodsImage": this.GoodsForm.goodsImage,
            "goodsInventoryCount": this.GoodsForm.goodsInventoryCount,
            "goodsName": this.GoodsForm.goodsName,
            "goodsPrice": this.GoodsForm.goodsPrice,
            "id": "",
            "updateTime": ""
          }
          updateGoods(obj).then(res => {
            console.log(res);
            this.$message(res.data.msg);
          })
      },
      //根据商品名称查找商品信息
      GetGoodsInfo(){
        searchGoodsByGoodsName(this.GoodsForm.goodsName).then(res =>{
            console.log(res);
            let goodsInfor =res.data.data;
            console.log(this.goodsInfor,"获取的用户信息")
            // this.goodsmessage = [{
            //   goodsName:goodsInfor.goodsName,
            //   goodsDescription:goodsInfor.goodsDescription,
            //   goodsPrice:goodsInfor.goodsPrice,
            //   goodsInventoryCount:goodsInfor.goodsInventoryCount,
            //   goodsInventoryCount:goodsInfor.goodsInventoryCount,
            // }]
          })
      },
    },
    created() {
        if (sessionStorage.getItem("userName") != null && sessionStorage.getItem("userName") != "") {
            this.findUserInfo(sessionStorage.getItem("userName"));
        }
      this.getAllCategory();
      this.handleRemove();
      let str = "上传文件成功:http://47.92.53.108:8080/IMG/c531d72b-486c-4433-9af3-84f7be04dd45.jpg";
      str = str.split("上传文件成功:")
      console.log(str);
    },
  }
</script>

<style scoped>
    @import "../assets/css/ShopAdminMain.css";
</style>